<script setup>
import {onMounted, reactive, ref} from 'vue'
import JPEG1 from '@/assets/imgs/1.jpg'
import JPEG2 from '@/assets/imgs/2.jpg'
import JPEG3 from '@/assets/imgs/3.png'
import JPEG4 from '@/assets/imgs/4.jpg'

const currentIndex = ref(0);

const getImageUrl = (name) => {
  return new URL(`/src/assets/imgs/${name}`, import.meta.url).href
}

const images = reactive([
  {src:getImageUrl('1.jpg'), alt: 'Image 1'},
  {src:getImageUrl('2.jpg'), alt: 'Image 2'},
  {src:getImageUrl('3.png'), alt: 'Image 3'},
  {src:getImageUrl('4.jpg'), alt: 'Image 4'},
])


//播放某一个幻灯片的方法
function play(index) {
  //判断index是否超出范围
  if (index < 0) {
    index = images.length - 1
  } else if (index >= images.length) {
    index = 0
  }
  //遍历所有的图片，隐藏所有的图片
  images.forEach((image, i) => {
    if (i === index) {
      currentIndex.value = index
    }
  });
}

onMounted(() => {
  //获取指示器
  //初始化
  play(currentIndex.value)
//自动播放
  setInterval(() => {
    play(currentIndex.value + 1)
  }, 1500)
})


const prev = () => {
  play(currentIndex.value - 1)
}
const next = () => {
  play(currentIndex.value + 1)
}

</script>

<template>
  <div class="carousel-container">
    <!-- 图片容器 -->
    <div class="carousel-track">
      <template  v-for="(img,index) in images">
        <img :class="{'active': currentIndex === index,'hidden': currentIndex !== index}"
             :src="img.src"/>
      </template>
    </div>
    <!-- 控制按钮 -->
    <div class="nav">
      <button class="prev-btn" @click="prev()">&lt;</button>
      <button class="next-btn" @click="next()">&gt;</button>
    </div>
    <!-- 指示器 -->
    <div class="indicators"></div>
  </div>

</template>

<style scoped>

.carousel-container {
  width: 800px;
  height: 400px;
  margin: 50px auto;
  position: relative;
  overflow: hidden;
}

.active {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hidden {
  display: none;
}

.nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.nav button {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}


</style>

<!--
<script setup>
import { ref, onMounted } from 'vue'
const prevBtn = document.querySelector('.prev-btn')
const nextBtn = document.querySelector('.next-btn')
const currentIndex = ref(0)
const images = rective([
   {src:'@/assets/1.jpg'},
   {src:'@/assets/2.jpg'},
   {src:'@/assets/3.jpg'},
   {src:'@/assets/4.jpg'}
])
//播放某一个幻灯片的方法
const play = (index) => {
  //获取所有的图片
  const images = document.querySelectorAll('.carousel-track img')
  //获取指示器
  const indicators = document.querySelector('.indicators')
  //判断index是否超出范围
  if (index < 0) {
    index = images.length - 1
  } else if (index >= images.length) {
    index = 0
  }

  //遍历所有的图片，隐藏所有的图片
  images.forEach((image, i) => {
    if (i === index) {
      currentIndex.value = index
    }
  });
}

onMounted(() => {
  //初始化
  play(currentIndex.value)

//自动播放
  setInterval(() => {
    play(currentIndex + 1)
  }, 1500)
})

const prev = () => {
  play(currentIndex.value - 1)
}
const next = () => {
  play(currentIndex.value + 1)
}


</script>

<template>
  <div class="carousel-container">
    <div class="carousel-track">
      <template v-for="(imag, index) in imags" :key="index">
        <img :src="imag.src" :class="{active: index === currentIndex.value, hidden: index !== currentIndex.value}"></img>
      </template>
    </div>

    &lt;!&ndash; 左右按钮 &ndash;&gt;
    <div class="nav">
      <button class="prev-btn" @click="prev()">&#10094;</button>
      <button class="next-btn" @click="next()">&#10095;</button>
    </div>

    &lt;!&ndash; 指示器 &ndash;&gt;
    <div class="indicators"></div>
  </div>
</template>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.carousel-container {
  width: 800px;
  height: 400px;
  margin: 50px auto;
  position: relative;
  overflow: hidden;
}

.active {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hidden{
  display: none;
}

.nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.nav button {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}


</style>-->
